Hay una entrada de hace bastante tiempo con los pasos a seguir para añadir una lupa sobre las imágenes y quien dice una lupa dice cualquier otra imagen.
En el blog de Oloman vi otra forma de hacerlo incluso con más variantes consiguiendo efectos muy llamativos.
El HTML lo podemos añadir en cualquier parte que admita código es decir entradas, plantilla y gadget de html.
<div id="contenedor">
<a class="miniatura" href="javascript:void(0);">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>
Los estilos se añaden justo antes de ]]></b:skin>
#contenedor {
position: relative;
}
.miniatura {
z-index: 1001;
text-decoration: none;
}
.miniatura img {
border: 0px;
}
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:0px;
left:0px;
}
.miniatura:hover span {
visibility: visible;
overflow:visible;
z-index: 1002;
}
Para añadir una imagen de descarga o lupa que parece que es de interés general es suficiente como explica Oloman cambiando en los estilos de "miniatura span" la altura que tenemos en top:0px y dejar más espacio a la izquierda en left:0px de esa forma centramos la segunda imagen. El único cambio que hice fue sustituir javascript:void(0) por la url del enlace ya sea un enlace externo o dentro del mismo blog.
Quedaría algo así:
<div id="contenedor">
<a class="miniatura" href="URL-ENLACE">
<img alt="" src=" URL-IMAGEN1 " />
<span><img alt="" src=" URL-IMAGEN2 " /></span>
</a>
</div>
.miniatura span {
position: absolute;
text-decoration: none;
visibility: hidden;
border: 0px;
top:60px;
left:120px;
}
Una recomendación, no es conveniente que una vez editada la entrada en HTML hagamos comprobaciones para ver el resultado en Redactar porque se altera el código y se pierde la etiqueta span. Es mucho mejor utilizar el vista previa.
hihihihi...co creative Ms. Gem@ :$
cool cool :)
Hola Gema, hay una cosilla del diseño de mi blog que me gustaría modificar, te he enviado un email con todos los detalles. Muchas gracias de antemano.
Pía Baroja.
muy bueno gema!!!
gracias!! me gustó mucho!!
:: Beben Koben hola me alegra que te guste :D
:: Pía Baroja miro es email y lo respondo :)
:: EpideMia gracias !!
muy bueno:D :D :D
una cosa:
¿como puedo tener comentarios y que mi blog sea más conocido?
http://informatic-pc.blogspot.com/
gracias.
:: nicolas no tengo respuesta para eso porque los comentarios es algo que debe surgir de la persona, el que no comenten no quiere decir que no ha guste lo que escribimos simplemente que no comentaron.
Para que sea más conocido una buena idea es darle de alta en buscadores y en algún directorio de confianza.
Nota: solo los miembros de este blog pueden publicar comentarios.